@page "/overview"
@page "/components"

@code {
    private IEnumerable<IBitComponentParams> _cascadingParams = new List<IBitComponentParams>
    {
        new BitCardParams { Background = BitColorKind.Primary, FullWidth = true, Style = "padding: 1.5rem" },
        new BitTextParams { Typography = BitTypography.Body1 }
    };
}

<PageOutlet Url="overview"
            Title="Overview"
            Description="discover bit BlazorUI at a glance, explore component categories, and jump-start a project." />


<section class="page-container">
    <BitParams Parameters="_cascadingParams">
        <BitText Typography="BitTypography.H2">bit BlazorUI</BitText>

        <br />

        <BitText Typography="BitTypography.H6" Gutter>
            Production-ready and Fluent-inspired components for Blazor that stay native, flexible,
            and fast across all interactive Blazor modes (WASM, Server, Hybrid, and pre-rendering).
        </BitText>
        
        <br />

        <BitText Typography="BitTypography.H6" Gutter>
            Build accessible experiences with built-in theme and RTL support, and consistent APIs that fit modern scenarios.
        </BitText>
        <BitText Gutter>
            <ul dir="auto">
                <li>Optimized for .NET 8.0+ with SSR-friendly styles and responsive layouts.</li>
                <li>Light/dark themes and global design tokens ready for customization.</li>
                <li>Extensive demos, docs, and source available for every component.</li>
            </ul>
        </BitText>

        <br /><br />

        <BitCard>
            <BitText Typography="BitTypography.H4" Gutter>Explore components</BitText>
            <br />
            <BitText Gutter>
                Choose a category to jump into usage guidance, props, and live examples.
            </BitText>
            <br />
            <BitStack Gap="1rem" Horizontal Wrap Alignment="BitAlignment.SpaceBetween">
                <BitParams Parameters="@([new BitCardParams { Background = BitColorKind.Secondary, FullSize = true }])">
                    <BitLink Href="/components/button" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/buttons-icon.svg" />
                                <BitText>Buttons</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/checkbox" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
                                <BitText>Inputs</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/circulartimepicker" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/pickers-icon.svg" />
                                <BitText>Pickers</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/footer" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/layouts-icon.svg" />
                                <BitText>Layouts</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/basiclist" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/lists-icon.svg" />
                                <BitText>Lists</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/breadcrumb" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/navs-icon.svg" />
                                <BitText>Navs</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/badge" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/notifications-icon.svg" />
                                <BitText>Notifications</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/progressbar" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/progrss-icon.svg" />
                                <BitText>Progress</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/accordion" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/surfaces-icon.svg" />
                                <BitText>Surfaces</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/element" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/utilities-icon.svg" />
                                <BitText>Utilities</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/components/appshell" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/extras-icon.svg" />
                                <BitText>Extras</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>

                    <BitLink Href="/iconography" Class="card" NoUnderline>
                        <BitCard>
                            <BitStack Alignment="BitAlignment.Center">
                                <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/icons-icon.svg" />
                                <BitText>Icons</BitText>
                            </BitStack>
                        </BitCard>
                    </BitLink>
                </BitParams>
            </BitStack>
        </BitCard>

        <br />

        <BitCard>
            <BitText Typography="BitTypography.H4" Gutter>Start with the project template</BitText>
            <br />
            <BitText Gutter>
                Spin up a clean bit BlazorUI solution aligned with the .NET 8.0+ hosting model, preconfigured for theming, SSR, and responsive layouts.
            </BitText>

            <br />

            <BitText Gutter>
                Install the template once:
            </BitText>

            <CodeBox>dotnet new install Bit.BlazorEmpty</CodeBox>

            <br />

            <BitText Gutter>
                Create your app with the default setup:
            </BitText>

            <CodeBox>dotnet new bit-empty -n MyBitBlazorEmptyApp</CodeBox>
        </BitCard>

        <br />

        <BitCard>
            <BitText Typography="BitTypography.H4" Gutter>Supported browsers</BitText>
            <br />
            <BitText Gutter>
                Verified on current releases for desktop and mobile:
            </BitText>
            <BitText Gutter>
                <ul dir="auto">
                    <li>Apple Safari (current+ version)</li>
                    <li>Google Chrome (current+ version)</li>
                    <li>Microsoft Edge (current+ version)</li>
                    <li>Mozilla Firefox (current+ version)</li>
                </ul>
            </BitText>
        </BitCard>

        <br />

        <BitCard>
            <BitText Typography="BitTypography.H4" Gutter>Supported platforms</BitText>
            <br />
            <BitText Gutter>
                Blazor Hybrid apps require:
            </BitText>
            <BitText Gutter>
                <ul dir="auto">
                    <li>Android 7.1 (API Level 24) or higher</li>
                    <li>iOS 15 or higher</li>
                    <li>macOS 12 (Monterey) or higher</li>
                    <li>Windows 7 SP1 or higher</li>
                </ul>
            </BitText>
        </BitCard>

        <br />

        <BitCard>
            <BitText Typography="BitTypography.H4" Gutter>Play on the GitHub Codespaces</BitText>
            <br />
            <BitText Gutter>
                Launch a ready-to-use playground in the browser with SDKs and tooling preinstalled, no local setup needed.
            </BitText>
            <BitText Gutter>
                Test bit BlazorUI quickly, prototype a page, or reproduce an issue before opening a PR.
            </BitText>
            <br />
            <BitLink Target="_blank" Href="https://codespaces.new/bitfoundation/bit-blazorui-playground/tree/dev">
                Open bit BlazorUI playground
                <BitIcon IconName="@BitIconName.ChevronRight" Style="font-size:12px;font-weight:bold" />
            </BitLink>
        </BitCard>

        <br />

        <BitCard>
            <BitText Typography="BitTypography.H4" Gutter>Resources</BitText>
            <br />
            <BitText Gutter>
                <ul dir="auto">
                    <li><BitLink Target="_blank" Href="https://blazorui.bitplatform.dev">Component docs</BitLink> - API reference, usage guidance, and demos.</li>
                    <li><BitLink Target="_blank" Href="https://github.com/bitfoundation/bitplatform">GitHub repository</BitLink> - source, issues, roadmap, and release notes.</li>
                    <li><BitLink Target="_blank" Href="https://wiki.bitplatform.dev">DeepWiki</BitLink> - AI-oriented wiki for better learning and troubleshooting.</li>
                </ul>
            </BitText>
        </BitCard>

        <br />

        <FeedbackSection Url="OverviewPage.razor" />
    </BitParams>
</section>
